import styled from "@emotion/styled"
import { memo } from "react"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { ImageComponent } from "@/components/base/Image"
interface AccountItemProps {
    icon: string
    label: string
    value?: string
    onClick?: () => void
    showArrow?: boolean
    needBorder?: boolean
    rightButton?: {
        text: string
        onClick: () => void
    }
    status?: string
}

const ItemWrapper = styled.div<{ needBorder?: boolean }>`
    display: flex;
    align-items: center;
    border-bottom: ${(props) => (props.needBorder === false ? "none" : "1px solid #0E0F1B1A")};
    height: 48rem;
    line-height: 24rem;
    font-weight: 500;
`

const IconWrapper = styled.img`
    width: 24rem;
    height: 24rem;
    margin-right: 12rem;
    display: flex;
    align-items: center;
`

const Label = styled.span`
    font-size: 16rem;
    color: #131416;
    flex: 1;
`

const Value = styled.span<{ status?: string; label?: string }>`
    font-size: ${(prop) => (prop.label === "KYC" ? "16rem" : "14rem")};
    margin-right: 4rem;
    color: ${(props) => {
        // console.log(props.status, "status")
        if (!props.status && props.label === "KYC") {
            return "#69728C"
        }
        switch (props.status) {
            case "pending":
                return "#FF8800"
            case "final_rejected":
                return "#F51450"
            case "rejected":
                return "#F51450"
            case "approved":
                return "#0CC048"
            default:
                return "#69728C"
        }
    }};
`

const Arrow = styled(ImageComponent("pages/AccountPage/item/arrow_right.webp"))`
    width: 24rem;
    height: 24rem;

    > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`

const RightButton = styled(ButtonRegular)`
    font-family: "Gilroy";
    height: 24rem;
    color: white;
    border-radius: 4rem;
    font-size: 12rem;
    border: none !important;
    background: linear-gradient(180deg, #3385ff 0%, #0a6cff 100%) !important;
    padding: 4rem 8rem;
    line-height: 16rem;
    box-shadow: none !important;
`

export const AccountItem = memo(
    ({
        icon,
        label,
        value,
        onClick,
        showArrow = true,
        needBorder = true,
        rightButton,
        status,
    }: AccountItemProps) => {
        return (
            <ItemWrapper
                needBorder={needBorder}
                onClick={onClick}
            >
                <IconWrapper src={icon}></IconWrapper>
                <Label>{label}</Label>
                {rightButton ? (
                    <RightButton onClick={rightButton.onClick}>{rightButton.text}</RightButton>
                ) : (
                    <Value
                        status={status}
                        label={label}
                    >
                        {value}
                    </Value>
                )}
                {showArrow && <Arrow />}
            </ItemWrapper>
        )
    },
    (prevProps, nextProps) => {
        return (
            prevProps.value === nextProps.value &&
            prevProps.needBorder === nextProps.needBorder &&
            prevProps.showArrow === nextProps.showArrow &&
            prevProps.status === nextProps.status &&
            prevProps.onClick === nextProps.onClick
        )
    },
)
